<style scoped>
</style>
<!-- 对 divider 组件的编辑 -->
<template>
  <div class="divider-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" ref="settingComponentDialog">
      <el-divider content-position="left">设置</el-divider>
      <el-row style="width:840px;">
        <el-col :span="24">
          <el-form :label-width="formLabelWidth">
            <el-form-item label="方向" style="margin-bottom:0px;">
              <el-radio-group v-model="data.className">
                <el-radio :label="'w-delimiters-hor'">横向</el-radio>
                <el-radio :label="'w-delimiters-ver'">纵向</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="width:840px;">
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item v-if="data.className === 'w-delimiters-hor'" label="宽度" style="margin-bottom:0px;">
              <el-input size="mini" style="width:80px;" @blur="blurConfigWidth" v-model="data.config.width" maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100% </span>
            </el-form-item>
            <el-form-item v-if="data.className === 'w-delimiters-ver'" label="高度" style="margin-bottom:0px;">
              <el-input size="mini" style="width:80px;" @blur="data.config.height = blurConfigNum(data.config.height)" v-model="data.config.height" maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100px </span>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :label-width="formLabelWidth">
            <el-form-item label="颜色" style="margin-bottom:0px;">
              <el-color-picker v-model="data.config.color"></el-color-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <Padding ref="stylePadding" />
    </SetDesignDialog>
  </div>
</template>

<script>
import Padding from '@/components/common/design/dialog/component/formitem/Padding.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTDIVIDER, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (!this.data.className) {
        this.data.className = 'w-delimiters-hor'
      }

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
        if (this.data.config.padding) {
          this.$refs['stylePadding'].setPadding(this.data.config.padding.split(' '))
        } else {
          this.$refs['stylePadding'].setPadding(['0px', '0px', '0px', '0px'])
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '120px',
      name: '分隔线',
      bjComponent: null,
      data: null
    }
  },
  watch: {
    data: {
      handler (newValue) {
        if (newValue && newValue.className === 'w-delimiters-hor') {
          this.data.config.width = isNaN(parseInt(this.data.config.width)) || parseInt(this.data.config.width) < 2 ? '100%' : this.data.config.width
          this.data.config.height = ''
        } else if (newValue && newValue.className === 'w-delimiters-ver') {
          this.data.config.width = '1px'
          this.data.config.height = isNaN(parseInt(this.data.config.height)) || parseInt(this.data.config.height) < 0 ? '100px' : this.data.config.height
        }
      },
      deep: true
    }
  },
  methods: {
    blurConfigWidth () {
      let value = this.data.config.width
      let reg = /^(\d+(px)?|(\d{1,2}|100)%)$/
      if (reg.test(value)) {
        if (/^(\d|\.)+$/.test(value)) {
          this.data.config.width = value + '%'
        } else {
          this.data.config.width = value
        }
      } else {
        this.data.config.width = isNaN(parseInt(this.data.config.width)) || parseInt(this.data.config.width) < 2 ? '100%' : parseInt(this.data.config.width) + '%'
      }
    },
    blurConfigNum (value) {
      let newValue
      let reg = /^(\d+(px)?)$/
      if (reg.test(value)) {
        if (/^(\d|\.)+$/.test(value)) {
          newValue = value + 'px'
        } else {
          newValue = value
        }
      } else {
        newValue = isNaN(parseInt(value)) ? '100px' : parseInt(value) + 'px'
      }
      return newValue
    },
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.data.config.padding = this.$refs['stylePadding'].getPadding().join(' ')
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    Padding,
    SetDesignDialog
  }
}

</script>
